<style lang="scss" scoped>
    .code-btn{
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translate3d(0,-50%,0);
        margin-left: 0;
    }
</style>
<template>
    <div class=" h-100 p15 flex column">
        <login-header></login-header>
    
        <div class="flex-1 flex column column-row-center ui-border-top scroll pt20">
            <el-radio-group v-model="registType" size="small">
                <el-radio-button label="1">手机号注册</el-radio-button>
                <el-radio-button label="2">邮箱注册</el-radio-button>
            </el-radio-group>
            <el-form ref="form" :model="form" label-width="80px" class="ui-form mt50" >
                <el-form-item label="手机" v-if="registType==1" prop="mobile" :rules="{required:true,len:11,message:'手机格式错误',trigger:'blur'}">
                    <el-input placeholder="输入您的手机号" size="large" v-model="form.mobile"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" v-else prop="email" :rules="{required:true,type:'email',message:'邮箱格式错误',trigger:'blur'}">
                    <el-input placeholder="输入您的邮箱" size="large" v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="code" :rules="{required:true, message:'验证码错误'}">
                    <div class="relative">
                        <el-input placeholder="你收到的验证码" size="large" v-model="form.code"></el-input>
                        <el-button v-show="registType==1" ref="sendCode" type="text" class="code-btn" @click="getCodeByMobile">发送</el-button>
                        <el-button v-show="registType==2" ref="sendCode" type="text" class="code-btn" @click="getCodeByEmail">发送</el-button>
                    </div>
                </el-form-item>
                <el-form-item label="密码" prop="password" :rules="{required:true, min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur'}">
                    <el-input type="password" size="large" v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="repass" :rules="{validator:recheckPass,trigger: 'blur'}">
                    <el-input type="password" size="large" v-model="form.repass"></el-input>
                </el-form-item>
                <el-form-item class="text-center mt50">
                    <el-button type="primary" class="ui-button-large" size="large" @click="submit">注 册</el-button>
                    <div>
                        已有账号,<el-button type="text" @click="$router.push('/login')">立即登录</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import loginHeader from './login-header'
export default {
    components: {
        loginHeader,
    },
    data() {
        return {
            registType:'1',
            form:{
                mobile:'',
                email:'',
                code:'',
                password:'',
                repass:'',
            }
        }
    },
    methods:{
        getCodeByMobile(){
            if (this.form.mobile.length!==11) {
                this.$message.error('请填写正确的手机号')
                return 
            }

            this.$http.post(`index.php?g=home&m=register&a=get_check_code`,{
                mobile: this.form.mobile
            }).then(({data}) => {
                data.msg && this.$message(data.msg)
                if (data.code===1) {
                    let btn = this.$refs['sendCode'].$el
                    this.$clickCooling(btn)
                }
            })
        },
        getCodeByEmail(){
            this.$http.post(`index.php?g=home&m=register&a=get_email_check_code`,{
                email: this.form.email
            }).then(({data}) => {
                data.msg && this.$message(data.msg)
                if (data.code===1) {
                    let btn = this.$refs['sendCode'].$el
                    this.$clickCooling(btn)
                }
            })
        },
        recheckPass (rule, value, callback){
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.form.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        },
        submit() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    let loading = this.$loading({fullscreen: true })
                    let postData
                    if (this.registType==1) {
                        postData = {
                            mobile: this.form.mobile,
                            mobile_code: this.form.code,
                            password: this.form.pass,
                            sourceurl: location.origin
                        }

                    }else{
                        // 邮箱注册
                        postData = {
                            email: this.form.email,
                            email_code: this.form.code,
                            password: this.form.pass,
                            sourceurl: location.origin
                        }

                    }

                    // 手机注册
                    this.$http({
                        url:'index.php?g=home&m=register&a=doregister',
                        method: 'post',
                        data: postData
                    }).then(({data}) => {
                        console.log('注册', data);
                        data.msg && this.$message(data.msg)
                        loading.close()
                        if (data.code===1) {
                            this.$router.push('/login')
                        }
                    })

                } else {
                    return false;
                }
            });
        },
    },
}
</script>